{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2023, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}

<div>
  <form data-abide novalidate id="{{formPanelId}}Wizard" class="custom creation">
    <div class="row">
      <div class="medium-6 columns">
        <label for="host_type">{{tr "Type"}}</label>
        <select id="host_type_mad" name="host_type">
          {{#each vmMadNameList}}
            <option value="{{this.driverName}}">{{this.displayName}}</option>
          {{/each}}
          <option value="custom">{{tr "Custom"}}</option>
        </select>
      </div>
      <div class="medium-6 columns" id="cluster_select">
        <label for="host_cluster_id">{{tr "Cluster"}}</label>
        <div id="host_cluster_id" name="host_cluster_id"></div>
      </div>
    </div>
    <div class="row">
      <div class="medium-6 columns" id="name_container">
        <label for="name">{{tr "Hostname"}}</label>
        <input type="text" name="name" id="name" required />
      </div>
      <div class="medium-6 columns">
      </div>
    </div>
    <div class="drivers">
      <fieldset>
        <legend>{{tr "Drivers"}}</legend>
        <div class="row">
          <div class="medium-6 columns">
            <div class="manager clear row" id="vmm_mads">
              <div class="large-12 columns">
                <label for="vmm">{{tr "Virtualization"}}</label>
                <select id="vmm_mad" name="vmm">
                  {{#each vmMadNameList}}
                    <option value="{{this.driverName}}">{{this.displayName}}</option>
                  {{/each}}
                  <option value="custom">{{tr "Custom"}}</option>
                </select>
              </div>
              <div class="large-12 columns">
                <label>{{tr "Custom VMM_MAD"}}</label>
                <input type="text" name="custom_vmm_mad" />
              </div>
            </div>
          </div>
          <div class="medium-6 columns">
            <div class="manager clear row" id="im_mads">
              <div class="large-12 columns">
                <label for="im">{{tr "Information"}}</label>
                <select id="im_mad" name="im">
                  {{#each vmMadNameList}}
                    <option value="{{this.driverName}}">{{this.displayName}}</option>
                  {{/each}}
                  <option value="custom">{{tr "Custom"}}</option>
                </select>
              </div>
              <div class="large-12 columns">
                <label>{{tr "Custom IM_MAD"}}</label>
                <input type="text" name="custom_im_mad" />
              </div>
            </div>
          </div>
        </div>
      </fieldset>
    </div>

    <div class="ec2_extra">
      <fieldset>
        <legend>{{tr "EC2"}}</legend>
        <div class="row">
          <div class="large-12 columns">
            <label for="REGION_NAME">{{tr "Region name"}}</label>
            <input type="text" name="REGION_NAME" />
          </div>
        </div>
        <div class="row">
          <div class="large-6 columns">
            <label for="EC2_ACCESS">{{tr "Access key ID"}}</label>
            <input type="text" name="EC2_ACCESS" />
          </div>
          <div class="large-6 columns">
            <label for="EC2_SECRET">{{tr "Secret access key"}}</label>
            <input type="text" name="EC2_SECRET" />
          </div>
        </div>
        <div class="row">
          <div class="medium-12 columns">
            <label>{{tr "Capacity"}}
              <span class="tip">
                {{tr "The valid list of instance types can be found in the official Amazon EC2 documentation, please use a value from the Model column of the following table: aws.amazon.com/ ec2/instance-types/"}}
              </span>
            </label>
            <div class="row">
              <div class="large-12 columns">
                <table class="dataTable capacity_table">
                  <thead>
                    <tr>
                      <th>{{tr "Key"}}</th>
                      <th>{{tr "Value"}}</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody class="capacity_ec2">
                  </tbody>
                  <tfoot>
                    <tr>
                      <td colspan="3">
                        <a type="button" class="add_custom_tag button small small-12 secondary radius">
                          <i class="fas fa-lg fa-plus-circle"></i>
                        </a>
                      </td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </div>
          </div>
        </div>
      </fieldset>
    </div>

    <div class="one_extra">
      <fieldset>
        <legend>{{tr "OpenNebula"}}</legend>
        <div class="row">
          <div class="large-6 columns">
            <label for="ONE_USER">{{tr "Remote username"}}</label>
            <input type="text" name="ONE_USER" />
          </div>
          <div class="large-6 columns">
            <label for="ONE_PASSWORD">{{tr "Remote password"}}</label>
            <input type="text" name="ONE_PASSWORD" />
          </div>
        </div>
        <div class="row">
          <div class="large-12 columns">
            <label for="ONE_ENDPOINT">{{tr "Remote endpoint"}}</label>
            <input type="text" name="ONE_ENDPOINT" />
          </div>
        </div>
        <div class="row">
          <div class="medium-12 columns">
            <label>{{tr "Remote capacity"}}</label>
          </div>
        <div class="row">
          <div class="large-1 columns"></div>
          <div class="large-11 columns">
            <label for="ONE_CAPACITY_CPU">{{tr "CPU"}}</label>
            <input type="number" name="ONE_CAPACITY_CPU" />
          </div>
        </div>
        <div class="row">
          <div class="large-1 columns"></div>
          <div class="large-11 columns">
            <label for="ONE_CAPACITY_MEMORY">{{tr "Memory"}}</label>
            <input type="number" name="ONE_CAPACITY_MEMORY" />
          </div>
        </div>
      </fieldset>
    </div>
  </form>
  <form data-abide novalidate class="vcenter_credentials" action="">
    <fieldset>
      <legend>{{tr "vCenter"}}</legend>
      <div class="row">
        <div class="large-4 medium-6 columns">
          <label for="vcenter_host">{{tr "Hostname"}}</label>
          <input type="text" name="vcenter_host" id="vcenter_host" required />
        </div>
        <div class="large-4 medium-6 columns">
          <label for="vcenter_user">{{tr "User"}}</label>
          <input type="text" autocomplete="email" autocomplete="username" name="vcenter_user" id="vcenter_user" required />
        </div>
        <div class="large-4 medium-6 columns">
          <label for="vcenter_password">{{tr "Password"}}</label>
          <input type="password" autocomplete="new-password" name="vcenter_password" id="vcenter_password" required />
        </div>
      </div>
      <div style="float:left">
          <button type="submit" id="get_vcenter_clusters" class="button radius">
            {{tr "Get Clusters"}}
          </button>
          <button class="button right success" id="import_vcenter_clusters" disabled>{{tr "Import"}}</button>
      </div>
      <br><br><br>
      <div class="row collapse">
        {{{vCenterClustersHTML}}}
      </div>
    </fieldset>
  </form>
</div>